<template>
  <div class="wenzhangguanlidiv">
    <div class="head" v-if="list.length>0">
      
      <div >
       <font class="sxlx">时间筛选</font>
        <el-dropdown>
          <span class="el-dropdown-link">
            {{nf}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="xznf(item)"
              v-for="(item,index) in filterdata.filter.year"
              :key="index"
            >{{item}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div>
        <el-dropdown>
          <span class="el-dropdown-link">
            {{yf}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="xzyf(item)"
              v-for="(item,index) in filterdata.filter.month"
              :key="index"
            >{{item}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div>
       <font class="sxlx">类型筛选</font>
        <el-dropdown>
          <span class="el-dropdown-link">
            {{glzl}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu class="el-dropdown-menu3" slot="dropdown">
            <el-dropdown-item
              v-for="(item,index) in filterdata.filter.tags"
              :key="index"
              @click.native="flzl(item.tags.id,item.tags.name)"
            >{{item.tags.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <el-input size="mini" v-model="input" placeholder="请输入内容" @keyup.enter.native="search(input)"></el-input>
      <el-button type="primary" size="mini" @click="search(input)">搜索</el-button>
    </div>
    <div class="neirong">
      <div v-for="(item,index) in listfilter " :key="index">
        <div class="nrtitle">
          <h3>{{item.blog.title}}</h3>
        </div>
        <div class="itemtitle">
          <font class="time">{{item.blog.time}}</font>
          <div class="imgdiv">
            <img src="@/assets/yanjing.png" title="浏览量" alt class="icon" />
          </div>
          <font class="imgfont">{{item.blog.browse}}</font>

          <div class="imgdiv">
            <img src="@/assets/pinglun.png" title="评论量" alt class="icon" />
          </div>
          <font class="imgfont">{{item.blog.comment}}</font>
          <div class="imgdiv">
            <img src="@/assets/zan.png" title="点赞" class="icon" />
          </div>
          <font class="imgfont">{{item.blog.fabulous}}</font>
          <div class="imgdiv">
            <img src="@/assets/shoucang.png" title="收藏" class="icon" />
          </div>
          <font class="imgfont">{{item.blog.collection}}</font>
          <div class="biggl">
            <div class="gl1" @click="tiaozhuan(item.blog.id)">查看</div>
            <div>|</div>
            <div class="gl2" @click="shanchu(item.blog.id)">删除</div>
          </div>
        </div>
        <hr size="1" color="#999" style="border:1 solid #999" />
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      input: "",
      list: [],
      nf: "选择年份",
      yf: "选择月份",
      glzl: "分类专栏",
      keywords: "",
      filterdata: "",
      listfilter: [],
      type: ""
    };
  },
  methods: {
    search(keywords) {
      this.listfilter = this.listfilter.filter(item => {
        if (item.blog.title.includes(keywords)) {
          return item;
        }
      });
    },
    shanchu(id) {
      this.$http
        .get(this.poot + "deleteblogbyid/" + id)
        .then(response => {
          this.chushihua();
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    tiaozhuan(id) {
      this.$router.push("/blog/" + id);
    },
    xznf(num) {
      this.nf = num;
      this.yf = "选择月份";
      this.glzl = "分类专栏";
      this.listfilter = this.list.filter(item => {
        if (parseInt(item.blog.time) <= parseInt(num)) {
          return item;
        }
      });
    },
    xzyf(num) {
      if (this.nf == "选择年份") {
        this.open("你还没有选择年份", "warning");
      } else {
          this.listfilter = this.list.filter(item => {
        if (parseInt(item.blog.time) <= parseInt(this.nf)) {
          return item;
        }
      });
        this.yf = num;
        this.listfilter = this.listfilter.filter(item => {
          if (parseInt(item.blog.time.substring(5, 7)) <= parseInt(num)) {
            return item;
          }
        });
      }
    },
    flzl(num, name) {
        this.glzl = name;
         this.yf = "选择月份";
         this.nf='选择年份'
        this.listfilter = this.list.filter(item => {
          if (item.blog.type + "" == num + "") {
            return item;
          }
        });
      
    },
    chushihua() {
      this.$http
        .get(this.poot + "selectblogBymailbox/" + this.user)
        .then(response => {
          this.list = response.data;
          this.listfilter = this.list;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    filterblogdata() {
      this.$http
        .get(this.poot + "filterblogdata")
        .then(response => {
          this.filterdata = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    open(message, type) {
      this.$message({
        message: message,
        type: type
      });
    }
  },
  computed: {
    ...mapState(["leixing"]),
    ...mapState(["poot"]),
    ...mapState(["user"])
  },
  mounted() {
    this.chushihua();
    this.filterblogdata();
  }
};
</script>
<style scoped>
.sxlx{
  margin-left: 30px;
}
.el-dropdown-menu3 {
  overflow: auto;
  height: 500px;
}
.el-dropdown-menu::-webkit-scrollbar {
  display: none;
}
.time {
  width: 200px;
}
hr {
  margin-left: 10px;
  margin-right: 10px;
}
.biggl {
  padding-left: 100px;
  display: flex;
}
.gl1 {
  margin-left: 2px;
  margin-right: 2px;
  color: #354b7b;
}
.gl2 {
  margin-left: 2px;
  margin-right: 2px;
  color: #8e180e;
}
.imgfont {
  margin-left: 12px;
  width: 70px;
}
img {
  height: 25px;
  /* margin-left: 20px; */
}
.itemtitle {
  margin-left: 20px;
  background-color: #1e1e1e;
  height: 40px;
  display: flex;
  justify-content: left;
  align-items: center;
}
h3 {
  color: #354b7b;
  margin: 20px;
}
.neirong::-webkit-scrollbar {
  display: none;
}
.neirong {
  overflow: auto;
  margin-top: 20px;
  background-color: #1e1e1e;
  height: 680px;
}
.el-button {
  margin-left: 20px;
  background-color: #161616;
  border: #ffd04b 1px solid;
  color: #fff;
}
.el-input {
  width: 200px;
  margin-left: 20px;
}
.head {
  height: 60px;
  background-color: #1e1e1e;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #354b7b;
  font-size: 15px;
}
.el-dropdown {
  margin-left: 20px;
}
.el-dropdown-item {
  color: #000;
}
.el-dropdown-menu {
  background-color: #1e1e1e;
}
.el-dropdown-link {
  cursor: pointer;
  color: #354b7b;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.wenzhangguanlidiv {
  height: 760px;
  width: 100%;
  margin-top: 20px;
}
</style>
